<template>
	<view class="container">
		<!-- 状态栏 -->
		<view :class="statusBarViewClass"></view>
		<!-- 导航栏 -->
		<view class="customer-nav-view nav-sticky">
			<view class="customer-nav-left">
				<uni-icons type="back" color='#000000' size="24" @click="goBackPage"></uni-icons>
			</view>
			<view class="customer-nav-title">
				个人资料
			</view>
			<view class="customer-nav-right">
			</view>
		</view>
		<!-- 个人信息 -->
		<view class="content-item-img" @click="selectImg">
			<view class="content-item-left">
				<text class="text-left">头像</text>
			</view>
			<view class="content-item-right">
				<image class="user-img" mode="aspectFill" @error="setDefImg"
					:src="userInfo.img?(userInfo.img.startsWith('http')?userInfo.img:(api.host+userInfo.img)):'/static/image/head_pic.png'">
				</image>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="content-item">
			<view class="content-item-left">
				<text class="text-left">账号</text>
			</view>
			<view class="content-item-right">
				<text class="text-right">{{userInfo.account}}</text>
			</view>
		</view>
		<view class="content-item">
			<view class="content-item-left">
				<text class="text-left">邮箱</text>
			</view>
			<view class="content-item-right">
				<text class="text-right">{{userInfo.email}}</text>
			</view>
		</view>
		<view class="content-item" @click="openInputDialog('昵称')">
			<view class="content-item-left">
				<text class="text-left">昵称</text>
			</view>
			<view class="content-item-right">
				<text class="text-right">{{userInfo.nickName}}</text>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="content-item" @click="openSelectDialog('性别')">
			<view class="content-item-left">
				<text class="text-left">性别</text>
			</view>
			<view class="content-item-right">
				<text class="text-right">{{userInfo.sex==1?'男':userInfo.sex==2?'女':'外星人'}}</text>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="content-item" @click="openCalendar">
			<view class="content-item-left">
				<text class="text-left">生日</text>
			</view>
			<view class="content-item-right">
				<text class="text-right">{{userInfo.birthday}}</text>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<!-- 保存信息 -->
		<button class="bt-save" @click="saveUserInfo">保存信息</button>

		<!-- 通用选择器 -->
		<zjw-list-popup :title="selectDialog_title" ref="selectDialog" :data="selectDialog_data"
			@click="confirmSelected">
		</zjw-list-popup>

		<!-- 通用输入框 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" :title="inputDialog_title" :placeholder="inputDialog_placeholder"
				@confirm="confirmDialogInput"></uni-popup-dialog>
		</uni-popup>

		<!-- 日期选择器 -->
		<zjw-calendar ref="myCalendar" v-model="userInfo.birthday"></zjw-calendar>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		showToast,
		getUserInfo,
		clearUserInfo,
		setUserInfo
	} from '@/utils/utils.js'
	import api from '@/config/api'
	import request from '@/utils/request'

	const maxTop = ref(0)
	const statusBarViewClass = ref("status-bar-view-2")
	const userInfo = ref(getUserInfo())

	const selectDialog = ref(null) // 选择器弹窗
	const selectDialog_title = ref('') // 选择器弹窗标题
	const selectDialog_data = ref([]) // 选择器弹窗数据
	const sex_list = ref([{
		label: '男',
		value: 1,
	}, {
		label: '女',
		value: 2,
	}, {
		label: '外星人',
		value: 3,
	}]) // 性别列表
	const myCalendar = ref(null) // 日历
	const inputDialog = ref(null) // 选择器弹窗
	const inputDialog_placeholder = ref()
	const inputDialog_title = ref()

	// 默认图片
	const setDefImg = () => {
		userInfo.value.img = "/static/image/head_pic.png"
	}

	// 选图片
	const selectImg = () => {
		uni.chooseImage({
			count: 1, // 选择数量
			sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			crop: {
				quality: 90, // 取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
				width: 250,
				height: 250
			}, // 图像裁剪参数，设置后 sizeType 失效
			success: function(res) {
				uni.uploadFile({
					url: api.host + api.uploadFileUrl,
					filePath: res.tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						let resultJson = JSON.parse(uploadFileRes.data)
						if (resultJson.success) {
							userInfo.value.img = resultJson.data
						}
					}
				});
			}
		});
	}

	// 打开通用选择器
	const openSelectDialog = (title) => {
		selectDialog_title.value = title
		selectDialog_data.value = sex_list.value
		selectDialog.value.open()
	}

	// 通用选择器：确认选择
	const confirmSelected = (item) => {
		if (selectDialog_title.value == '性别') {
			userInfo.value.sex = item.value
		}
	}

	// 打开通用输入框
	const openInputDialog = (title) => {
		inputDialog_title.value = title
		inputDialog_placeholder.value = '请输入' + title
		inputDialog.value.open()

	}

	// 通用输入框：确认输入
	const confirmDialogInput = (val) => {
		if (inputDialog_title.value == '昵称') {
			userInfo.value.nickName = val
		}
	}

	// 打开日历
	const openCalendar = () => {
		myCalendar.value.open()
	}

	// 保存
	const saveUserInfo = () => {
		if (!userInfo.value.nickName || userInfo.value.nickName.trim() == "") {
			showToast('请输入昵称')
			return
		}
		userInfo.value.nickName = userInfo.value.nickName.trim()
		request.post(api.host + api.updateUserInfoUrl, userInfo.value).then(result => {
			if (result.success) {
				setUserInfo(userInfo.value)
				uni.reLaunch({
					url: '/pages/me/me'
				})
			}
		})
	}

	// 返回
	const goBackPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	@import url("user.css");
</style>